Skip to content

Redesign the homepage and marketing pages - #75

Merged
MarcinZiabek merged 71 commits into
mainfrom
theme-redesign-experiment
Nov 3, 2026
Merged

MarcinZiabek merged 71 commits into
mainfrom
theme-redesign-experiment

Conversation

@MarcinZiabek

Copy link
Copy Markdown
Member

Redesigns the homepage and the pricing, license, features overview and contact pages on one shared visual system, in light and dark.

  • Homepage: rebuilt with a new hero, CTA cards, Quick Start demo, and Companion, Trust and License sections.
  • Pricing: restyled tiers, and the FAQ is now grouped by topic. Prices, FAQ answers and legal text are unchanged.
  • Features overview: rebuilt with an icon and description for each feature.
  • Under the hood: Font Awesome now comes from npm packages instead of the kit script, code is highlighted at build time with Shiki, images moved to WebP, and 145 unused files are removed.

Builds now need FONTAWESOME_NPM_AUTH_TOKEN, in CI and in production.

MarcinZiabek and others added 30 commits October 12, 2026 12:49
…rview`, and `HomePageStandardCompliance`. Add experimental `TrustPairR` and `ValidationLab` components for prototyping new designs.
…eAgentDemo` and `HomePageCtaCard`. Simplify design and enhance functionality with interactive and animated elements.
…roposals, and design explorations. Include structured guidelines, reasoning behind visual enhancements, and new asset production plans.
… components for cleaner implementation and reuse, removing `HomePageAgentDemo` while updating styles and templates accordingly.
… components for cleaner implementation and reuse, removing `HomePageAgentDemo` while updating styles and templates accordingly.
…ectory. Remove `HomePageMultiplatform.vue` and introduce `CompanionA.vue`, `CompanionB.vue`, `CompanionC.vue`, and `CompanionC2.vue` for enhanced modularity and design experimentation.
…A.vue`, `LicenseB.vue`, `LicenseC.vue`, and `LicenseD.vue`. Streamline styles and templates for clearer structure and design experimentation.
…tions.vue`, `FaqRailContents.vue`, and `FaqRailPanel.vue`. Introduce scoped styles, improve layout experimentation, and support for group-specific interactions.
… with "Invoice tutorial video", reorder "Sample gallery".
…ets.md`, `brainstorm.md`, `PROMPT.md`, and `proposals.md`) to declutter the repository and reflect finalized design implementation.
…omePageSampleGallery.vue`, `HomePageWindowContainer.vue`, `PricingResellers.vue`, and `arrow-right.svg`). Refactor `CustomPages.css` and streamline `LicensePurchaseSuccess.vue` structure. Optimize `FeaturesOverview.vue` for better list iteration clarity.
…nd unused classes across components. Refactor `CustomPages.css` for cleaner definitions and consistency. Clarify visual hierarchy in license and pricing sections. Simplify homepage structure and enhance modularity for reusability.
… categories and items more concisely. Simplify and modularize homepage CTA visuals with `ctaVisual.css`. Streamline feature summaries by removing redundant descriptions for cleaner, focused content.
…usable variables for cleaner and more maintainable background styling.
…sOverview.vue` rendering for clarity and maintainability. Streamline `CustomPages.css` by consolidating panel styles and removing card-specific rules. Adjust margins in `LicensePurchaseSuccess.vue` for consistency.
…ularity by refining CSS variables and selectors in `CustomPages.css`. Optimize list and panel structures across components for clarity and maintainability. Adjust and centralize visual hierarchy for licenses, features, and CTAs. Simplify and refactor highlighter and statistics logic for efficiency.
…e`. Replace runtime code highlighting with build-time via `quickStart.data.ts`. Modularize license pricing in `prices.ts` for reuse. Refactor homepage components and CSS for clarity, maintainability, and visual consistency.
Nothing styles or queries them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
DocumentTemplate.vue looks documents up by key and never reads doc.id.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
.custom-page p and .custom-page ul already set 1rem, 1.5rem and text-2, and the
list items and the spans in them inherit those values.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- .action: VitePress's preflight already gives buttons font: inherit, border 0
  and a pointer cursor (links get the pointer from the browser); the computed
  border-style is now solid instead of none, at zero width
- Companion: the download items' hover colour lost to
  .custom-page a:not(.action):hover, which is what readers see (brand blue);
  their text-decoration and the view buttons' cursor came from the base styles
- FAQ answer links and legal document links take brand-1 from
  .custom-page p a and .vp-doc a
- h1, h3 and button values equal to the shared .custom-page h1/h3 and .action
  rules (hero title weight, FAQ category title size and colour, contact
  business name size, pricing button alignment and hover text colour)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The production build's lightningcss pass (Vite's baseline-widely-available
target) writes -webkit-mask*, -webkit-mask-composite: xor and
-webkit-background-clip for every rule that uses them; the built stylesheet
was checked rule by rule. -webkit-text-fill-color stays: it is not a prefixed
copy of anything.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The only two places that used CSS nesting; every other style block is flat.
The built stylesheet is unchanged apart from where Vue places the scope
attribute on one :hover rule.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Trust: the foundations panel is the two-by-two grid itself instead of a
  panel holding one .cells div, so the panels no longer need a flex column
  to stretch it (the compliance panel lays out the same as a block)
- Quick start: the composer takes the dock's spacing as its own margin

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ts 32px

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… consistency**

- Standardize background glows across all pages to a single brand blue for better consistency in light and dark themes.
- Simplify glow and gradient logic in `CustomPages.css`.
- Refactor homepage sections: introduce cleaner layout for "benefits" and "statistics" with improved alignment and responsiveness.
- Replace tagline and unused sections with concise benefit lists derived from data.
- Adjust radial glow intensities in license panel styles for subtle responsiveness.
- Update various icons with consistent Font Awesome classes to improve clarity and alignment.
…gnment

- Eliminated the `icon` property from `StatisticEntry` and removed associated icon rendering logic.
- Adjusted statistic styles for better alignment and spacing.
- Unified layout rules between statistics and benefits for consistent typography and responsiveness.
…branding with new logos and visual consistency across themes."
- Remove `texture-dots` class for cleaner container styling.
- Adjust font sizes and line heights in `PricingTiers` and `PricingFaq` for improved readability and consistency.
…ontent, improve CTA animations, and streamline component styles.
…d logic

- Refactor licensing document views: remove contents rail and compact menus for a streamlined layout.
- Improve metadata typography, alignment, and colors for better readability.
- Optimize CSS for consistency and responsiveness.
- Update link to the configuration guide for better clarity.
- Remove unused sections and redundant logic from license documents data.
… consistency

- Streamline `DocumentTemplate.vue` structure, simplifying meta section and navigation.
- Refactor CSS: enhance color variables, adjust alignment, and clean up meta styles.
- Introduce `grain-dark.png` for improved dark theme visuals.
…ogic, adjust layout for better spacing, and improve animation logic for visibility-based interactions.
…ight typo, add lazy loading to images, and update favicon and logo files.
…ions, add `noEmit`, refactor imports, and enhance sidebar handling.
…tree-shaking, and refactor icons usage across components.
…om Font Awesome. Add detailed descriptions to all features and refactor feature data structure for modularity and improved readability.
…om Font Awesome. Add detailed descriptions to all features and refactor feature data structure for modularity and improved readability.
…dd custom icons, and adjust feature icon mapping for clarity.
…update styles, and remove unused elements for cleaner design."
… with `margin-top`, update colors, and refine shadow and list item styles for consistency.
…d `HomePageCtaTutorialVisual` and `HomePageCtaFeaturesVisual`, update links and descriptions, and remove unused sample gallery reference.
…, adjust open item styling with inset shadows, improve hover behavior, and ensure touch compatibility.
Copilot AI balanced review requested due to automatic review settings November 3, 2026 14:53

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

The CI install step lacks the token required for the new private-registry dependencies, blocking the documentation build, while contrast and keyboard-focus defects also remain unresolved.

4 open issues
What changed in this PR

Redesigns QuestPDF’s homepage and marketing pages around a shared light/dark visual system within the VitePress documentation site.

Changes:

  • Rebuilds the homepage with animated cards, a Quick Start demo, and Companion, Trust, and License sections.
  • Updates pricing, legal, and contact layouts, centralizes displayed prices, and groups FAQ content.
  • Moves icons to npm packages and highlighting to build time, updates image references to WebP, and removes obsolete components and assets.
File Description
tsconfig.json Enables TypeScript-extension imports without emitting files.
package.json Adds icon packages and Shiki; updates site dependencies.
docs/​quick-start.md Uses WebP example images.
docs/​public/​star.svg Removes obsolete star asset.
docs/​public/​nuget.svg Removes obsolete NuGet asset.
docs/​public/​homepage/​supported-platforms/​windows.svg Removes standalone Windows icon.
docs/​public/​homepage/​supported-platforms/​vscode.svg Removes standalone VS Code icon.
docs/​public/​homepage/​supported-platforms/​visual-studio.svg Removes standalone Visual Studio icon.
docs/​public/​homepage/​supported-platforms/​rider.svg Removes standalone Rider icon.
docs/​public/​homepage/​supported-platforms/​linux.svg Removes standalone Linux icon.
docs/​public/​homepage/​supported-platforms/​docker.svg Removes standalone Docker icon.
docs/​public/​homepage/​supported-platforms/​azure.svg Removes standalone Azure icon.
docs/​public/​homepage/​supported-platforms/​aws.svg Removes standalone AWS icon.
docs/​public/​homepage/​supported-platforms/​apple.svg Removes standalone Apple icon.
docs/​public/​homepage/​noise.svg Removes old background texture.
docs/​public/​homepage/​getting-started/​arrow-right.svg Removes obsolete arrow asset.
docs/​invoice-tutorial.md Uses the WebP invoice image.
docs/​companion/​usage.md Clarifies platform and installer labels.
docs/​companion/​download.md Clarifies package formats and Linux distributions.
docs/​.vitepress/​theme/​VitepressAdjustments.css Updates theme colors, navigation, search, and PDF sizing.
docs/​.vitepress/​theme/​statistics.data.ts Fetches statistics concurrently and adds adoption metrics.
docs/​.vitepress/​theme/​pricing/​PricingResellers.vue Removes the separate reseller section.
docs/​.vitepress/​theme/​pricing/​PricingIndex.vue Updates pricing-page structure and spacing.
docs/​.vitepress/​theme/​pricing/​PricingContact.vue Combines reseller information and contact panels.
docs/​.vitepress/​theme/​pricing/​prices.ts Centralizes displayed license prices.
docs/​.vitepress/​theme/​pricing/​faq.ts Organizes FAQ content by topic.
docs/​.vitepress/​theme/​plausibleEvents.ts Removes the old demo’s analytics helper.
docs/​.vitepress/​theme/​PaddleIntegration.vue Removes the standalone initialization component.
docs/​.vitepress/​theme/​paddle.ts Types configuration and exports the Paddle loader.
docs/​.vitepress/​theme/​license/​LicenseIndex.vue Restyles the legal-document directory.
docs/​.vitepress/​theme/​license/​documents/​licenseDocuments.data.ts Extracts metadata and adds heading anchors.
docs/​.vitepress/​theme/​license/​documents/​DocumentTemplate.vue Updates legal-document layout and metadata display.
docs/​.vitepress/​theme/​LayoutFooter.vue Updates footer styling and calculates the year.
docs/​.vitepress/​theme/​Layout.vue Initializes Paddle when the shared layout mounts.
docs/​.vitepress/​theme/​Icon.vue Renders packaged icon definitions as inline SVG.
docs/​.vitepress/​theme/​homepage/​sessionBuilder.ts Builds highlighted demo states at build time.
docs/​.vitepress/​theme/​homepage/​quickStart.data.ts Defines the invoice-editing demonstration.
docs/​.vitepress/​theme/​homepage/​HomePageWindowContainer.vue Removes the old demo window wrapper.
docs/​.vitepress/​theme/​homepage/​HomePageTrust.vue Combines compliance, privacy, and platform information.
docs/​.vitepress/​theme/​homepage/​HomePageStandardCompliance.vue Removes the previous compliance section.
docs/​.vitepress/​theme/​homepage/​HomePageOverview.vue Removes the previous foundations section.
docs/​.vitepress/​theme/​homepage/​HomePageMultiplatform.vue Removes the previous platform grid.
docs/​.vitepress/​theme/​homepage/​HomePageLicense.vue Rebuilds license benefits and tier summaries.
docs/​.vitepress/​theme/​homepage/​HomePageHighlightedCode.vue Removes runtime highlighting component.
docs/​.vitepress/​theme/​homepage/​HomePageHero.vue Rebuilds the hero around benefits and statistics.
docs/​.vitepress/​theme/​homepage/​HomePageGettingStarted.vue Removes the old invoice tutorial section.
docs/​.vitepress/​theme/​homepage/​HomePageFeatures.vue Removes the old feature-icon section.
docs/​.vitepress/​theme/​homepage/​HomePageCtaTutorialVisual.vue Adds an animated invoice tutorial illustration.
docs/​.vitepress/​theme/​homepage/​HomePageCtaFeaturesVisual.vue Adds an animated feature illustration.
docs/​.vitepress/​theme/​homepage/​HomePageCtaCard.vue Adds reusable interactive navigation cards.
docs/​.vitepress/​theme/​homepage/​HomePageCtaBuildVisual.vue Adds an illustration for the planned video card.
docs/​.vitepress/​theme/​homepage/​HomePageCompanion.vue Rebuilds the Companion panel and adds download choices.
docs/​.vitepress/​theme/​homepage/​HomePageCodeFocusedApproach.vue Removes the previous code-first section.
docs/​.vitepress/​theme/​homepage/​HomePageCodeContainer.vue Removes the old code-window composition.
docs/​.vitepress/​theme/​homepage/​HomePageCodeAnimation.vue Removes the previous live demonstration.
docs/​.vitepress/​theme/​homepage/​HomePageAdoption.vue Removes the standalone statistics section.
docs/​.vitepress/​theme/​homepage/​HomePage.vue Composes the redesigned homepage sections.
docs/​.vitepress/​theme/​homepage/​ctaVisual.css Shares illustration geometry and styling.
docs/​.vitepress/​theme/​homepage/​ctaTimeline.ts Provides shared animation sequencing and cancellation.
docs/​.vitepress/​theme/​homepage/​createCodeHighlighter.ts Removes the runtime highlighter factory.
docs/​.vitepress/​theme/​homepage/​codeFolding.ts Shares method-folding logic for the demo.
docs/​.vitepress/​theme/​homepage/​codeExamples/​invoice.html Adds the demo’s initial HTML invoice.
docs/​.vitepress/​theme/​homepage/​codeExamples/​helloWorld.cs Removes the previous hero example.
docs/​.vitepress/​theme/​homepage/​codeExamples/​familiarProgrammingConcepts.cs Removes an obsolete code sample.
docs/​.vitepress/​theme/​homepage/​codeExamples/​codeFirstApproach.cs Removes the previous code-first sample.
docs/​.vitepress/​theme/​customIcons.ts Defines custom icons compatible with the SVG renderer.
docs/​.vitepress/​theme/​Contact.vue Restyles support cards and business information.
docs/​.vitepress/​markdownit-imagesize-plugin.ts Defaults Markdown images to lazy loading.
docs/​.vitepress/​config.ts Updates branding, navigation, and documentation indexing.
.npmrc Configures authenticated Font Awesome package access.

Review effort: Balanced

Comment thread .npmrc
@@ -0,0 +1,2 @@
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
Comment on lines +111 to +114
function closeOnEscape(event: KeyboardEvent) {
if (event.key === "Escape")
isDownloadOpen.value = false;
}

.tier.professional .tier-name {
color: white;
background-color: light-dark(#2196F3, #1976D2);
}

.action.pricing-button:hover {
background-color: light-dark(#1B5E20, #388E3C);
…ment

# Conflicts:
#	docs/.vitepress/config.ts
#	package-lock.json
#	package.json
@MarcinZiabek
MarcinZiabek merged commit f10407c into main Nov 3, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants